<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2997703_df2hgesofl.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  

</head>
<body>
    <div class="nav">
        <div class="logo">
            <div class="logoImg"><img src="./imgs/logo.png" alt="草方格"></div>
            <div class="logoText">草方格 Square</div>
        </div>
        <div class="search">
            <div class="searchBtn">
                <div class="text">商品</div>
                <div class="icon iconfont icon-xiangxiajiantou"></div>
            </div>
            <div class="input">
                <div class="icon iconfont icon-icon-test"></div>
               <input type="text" placeholder="请输入搜索的艺术品、专辑或艺术家">
            </div>
        </div>
        <div class="navList">
            <div class="navItem">商城</div>
            <div class="navItem icon iconfont icon-renzheng1"></div>
            <div class="navItem icon iconfont icon-qianbao"></div>
            <div class="navItem icon iconfont icon-help"></div>
        </div>
    </div>
    <!-- 滚动条 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <video src="./imgs/video1.mp4" autoplay loop></video>
            </div>
            <div class="swiper-slide">
                <video src="./imgs/video2.mp4" autoplay loop></video>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 轮播图中间显示的内容 -->
        <div class="swiperMain">
            <h1>Square</h1>
            <h3>让价值自由流通</h3>
            <p>
                <span>潮流</span> <span>音乐</span> <span>域名</span> <span>虚拟世界</span> <span>收藏品</span> <span>交易卡</span>
            </p>
            <div class="swiperBtn">
                <div class="publishBtn  wow bounceInLeft">
                    <span class="iconfont icon-fabu"></span>
                    <span class="txt">发布NFT</span>
                </div>
                <div class="supermarkBtn wow bounceInRight">
                    <span class="iconfont icon-caidan"></span>
                    <span class="txt">浏览商城</span>
                </div>
            </div>
        </div>


    </div>

<div class="goodness">
    <h3>优势</h3>
    <div class="goodList">
        <div class="goodItem wow bounceInLeft">
            <img src="./imgs/net.png" alt="">
            <div class="title">作品众多</div>
            <div class="desc">拥有独家NFT作品，众多前卫创作者，作品分类涵盖范围广。</div>
        </div>
        <div class="goodItem wow bounceInLeft">
            <img src="./imgs/secure.png" alt="">
            <div class="title">安全可信</div>
            <div class="desc">依托司法链与区块链溯源，作品铸造链上留痕，来源可溯，记录可查，版权可信。</div>
        </div>
        <div class="goodItem wow bounceInRight">
            <img src="./imgs/fear.png" alt="">
            <div class="title">费用更低</div>
            <div class="desc">发行手续费低于行业平均水平；NFT作品交易佣金比例低。</div>
        </div>
        <div class="goodItem wow bounceInRight">
            <img src="./imgs/clock.png" alt="">
            <div class="title">铸造更快</div>
            <div class="desc">流程操作更便捷，作品生成更迅速。</div>
        </div>
    </div>
    
</div>

<div class="course">
    <h2>教程</h2>
    <div class="courseList">
        <div class="courseItem">
            <img src="./imgs/banner1.png" alt="">
            <h4>创建账号教程</h4>
            <p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证。</p>
        </div>
        <div class="courseItem">
            <img src="./imgs/banner2.png" alt="">
            <h4>购买艺术品教程</h4>
            <p>了解商品的拍卖和购买流程，帮您完成购买心仪的艺术品的愿望。</p>
        </div>
        <div class="courseItem">
            <img src="./imgs/banner3.png" alt="">
            <h4>发布艺术品教程</h4>
            <p>上传您的作品（图像、视频、音频或3D艺术），添加标题和描述，并自定义您的 NFT，包括属性、统计数据和可解锁的内容。</p>
        </div>
    </div>
</div>

<div class="friend">
    <h3>合作伙伴</h3>
    <div class="friends">
        <img class="wow slideInLeft" src="./imgs/friend1.png" alt="">
        <img class="wow slideInLeft" src="./imgs/friend2.png" alt="">
        <img class="wow slideInRight" src="./imgs/friend3.png" alt="">
        <img class="wow slideInRight" src="./imgs/friend4.png" alt="">
    </div>
</div>

<div class="footer">
    Copyright © 2021 杭州米链科技有限公司 | 服务条款 | 隐私政策
    浙ICP备18037574号-8
</div>


    <div class="zhezhao">
        <div class="loginContent">
            <div class="close">关闭</div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
    <script src="./js/nav.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/wrapper.js"></script>
    <script src="./js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</body>
</html>